<template>
  <el-card shadow="naver">
    <el-form ref="ruleFormRef" :model="ruleForm" label-width="160px" class="demo-ruleForm" status-icon>
      <el-row>
        <el-col :span="24">
          <el-form-item label="controller 路径" prop="controllerPath">
            <el-input v-model="ruleForm.controllerPath" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="service 路径" prop="servicePath">
            <el-input v-model="ruleForm.servicePath"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="serviceImpl 路径" prop="serviceImplPath">
            <el-input v-model="ruleForm.serviceImplPath"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="MapperJava 路径" prop="mapperJavaPath">
            <el-input v-model="ruleForm.mapperJavaPath"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="MapperXml 路径" prop="mapperXmlPath">
            <el-input v-model="ruleForm.mapperXmlPath"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="PoJava 路径" prop="poJavaPath">
            <el-input v-model="ruleForm.poJavaPath"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="VoJava 路径" prop="voJavaPath">
            <el-input v-model="ruleForm.voJavaPath"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="RequestJava 路径" prop="requestJavaPath">
            <el-input v-model="ruleForm.requestJavaPath"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="ListVue 路径" prop="listVuePath">
            <el-input v-model="ruleForm.listVuePath"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="DetailVue 路径" prop="detailVuePath">
            <el-input v-model="ruleForm.detailVuePath"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="ApisVue 路径" prop="apisVuePath">
            <el-input v-model="ruleForm.apisVuePath"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="ModelVue 路径" prop="modelVuePath">
            <el-input v-model="ruleForm.modelVuePath"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref} from 'vue'
import {CodeGenConfig} from "@/apis/model/system/CodegenModel";
import {getCodeGenConfigById, updateCodeGenConfig} from "@/apis/http/system/CodegenHttp";
import {ElMessage, FormInstance, FormRules} from "element-plus";

const ruleForm: any = ref<CodeGenConfig>({
  id: 1   // 默认设置ID为1
} as CodeGenConfig);

const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules>({
  controllerPath: [
    { required: true, message: '请输入controller 路径', trigger: 'blur' }
  ],
  servicePath: [
    { required: true, message: '请输入service 路径', trigger: 'blur' }
  ],
  serviceImplPath: [
    { required: true, message: '请输入serviceImpl 路径', trigger: 'blur' }
  ],
  mapperJavaPath: [
    { required: true, message: '请输入MapperJava 路径', trigger: 'blur' }
  ],
  mapperXmlPath: [
    { required: true, message: '请输入MapperXml 路径', trigger: 'blur' }
  ],
  poJavaPath: [
    { required: true, message: '请输入PoJava 路径', trigger: 'blur' }
  ],
  voJavaPath: [
    { required: true, message: '请输入VoJava 路径', trigger: 'blur' }
  ],
  requestJavaPath: [
    { required: true, message: '请输入RequestJava 路径', trigger: 'blur' }
  ],
  listVuePath: [
    { required: true, message: '请输入ListVue 路径', trigger: 'blur' }
  ],
  detailVuePath: [
    { required: true, message: '请输入DetailVue 路径', trigger: 'blur' }
  ],
  apisVuePath: [
    { required: true, message: '请输入ApisVue 路径', trigger: 'blur' }
  ],
  modelVuePath: [
    { required: true, message: '请输入ModelVue 路径', trigger: 'blur' }
  ]
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      updateCodeGenConfig(ruleForm.value).then(res => {
        const code = res.code;
        const message: string = res.message;
        const data = res.data;
        if (code == 200) {
          ElMessage({
            message: '更新配置成功',
            type: 'success',
          })
        }
      })
    }
  })
}

onMounted(() => {
  getCodeGenConfigById(1).then(res => {
    const code = res.code
    const data: CodeGenConfig = res.data
    if (code == 200) {
      ruleForm.value = data
      console.log(ruleForm)
    }
  })
})
</script>

<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
